tags: ItIron2021 Javascript

前言

今天又要繼續非同步與promise的愛恨糾葛了，大家再努力一下下吧! 看久了promise的題目其實也是挺有趣的

本日題目與解釋

請問下方的程式碼輸出結果為?

const promise = new Promise((resolve,reject)=> {
  console.log(1)
  resolve(5)
  console.log(2)
  reject(6)
})

promise.then((value)=> {
  console.log(value)
  console.log(3)
}).catch(value => {
  console.log(value)
})

console.log(4)

倒數幾張的防雷圖~~~

以下為輸出結果

1
2
4
5
3

要解決這個問題就需要把你前幾天所學的東西全部用上了

• 同步與非同步的處理順序
• promise的宣告與取值

我們都知道js根據event loop會先執行同步的程式碼，所以

1
2
4

會先被印出，看到這邊你可能覺得有點奇怪了，1 & 2不是在promise裡面嗎? 而promise不是非同步的程式碼嗎?
nonono 可愛的傻孩子，promise會產生一個非同步的值，但它從來就不是非同步的程式碼，取值的行為是非同步沒錯，因為我不知道你會在什麼時候呼叫.then或是.catch，但promise一旦定義就會馬上執行裡面的程式碼，否則它怎麼會知道該resolve還是reject這個promise呢?

現在我們處理完同步的部分了，剩下的就是promise取值而已囉!

promise.then((value)=> {
  console.log(value)
  console.log(3)
}).catch(value => {
  console.log(value)
})

要解這段程式碼，首先你就需要知道這個promise最終的狀態是fulfilled || rejected，回頭看一下吧!

const promise = new Promise((resolve,reject)=> {
  console.log(1)
  resolve(5) // 先到先贏，是fulfilled
  console.log(2)
  reject(6)
})

記得我們之前提到的觀念嗎?

• promise一旦狀態改變後就不會再變化了

因此，一旦執行resolve或reject之後，你後面有再多的resolve/reject都不會改變結果的! 既然是fulfilled我們就可以放心地只看.then那段，而resolved的值就是我們的value，最終可以看成

promise.then((value)=> {
  console.log(5)
  console.log(3)
})

綜合起來就是你看到的12453囉! 一步步拆解後也沒這麼難對吧?

本日核心觀念與總結

核心觀念

event loop、promise

總結

• 了解同步/非同步的執行順序
• 理解promise的取值才是非同步的操作

本文章同步發布於個人部落格，有興趣的朋友也可以來逛逛~!